<template>
<div>
  <div class="search-container" style="margin-bottom: 10px">
    <el-input style="width: 200px" placeholder="通过姓名查找" v-model="searchRealName"></el-input>
    <el-input style="width: 200px; margin: 0 5px" placeholder="通过学号查找" v-model="searchUserId"></el-input>
    <el-button type="primary" v-on:click="getStudentListByCondition">查询</el-button>
    <span  class="class-name" style="color: tomato; margin-left: 650px; font-size: 20px;">{{userInfo.className}}</span>
  </div>
  <el-table :data="tableData" stripe :header-cell-style="{backgroundColor: 'aliceblue',fontWeight: 'bold' ,color: '#333'}" empty-text="未找到符合条件的学生信息">
    <el-table-column type="selection"
    width="55" align="center">
    </el-table-column>
    <el-table-column prop="userId" label="学号" align="center" width="130"></el-table-column>
    <el-table-column prop="realName" label="姓名" align="center" width="238"></el-table-column>
    <el-table-column  label="头像" width="100">
      <template v-slot = 'scope'>
        <div style="display: flex; align-items: center">
          <el-image style="width: 50px; height: 50px; border-radius: 50%" :src="scope.row.avatar ? scope.row.avatar : '../../../static/img/avatar.jpg'" placeholder=""></el-image>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="sexType" label="性别" align="center" width="150"></el-table-column>
    <el-table-column prop="phoneNumber" label="手机号" align="center" width="200"></el-table-column>
    <el-table-column prop="email" label="邮箱" align="center" width="200"></el-table-column>
    <el-table-column label="操作" align="center" width="223">
      <template v-slot="scope">
        <el-button size=“mini” type="primary" plain  @click="handleViewFocus(scope.row.userId, scope.row.realName)">查看近期课堂专注度</el-button>
<!--        <el-button size="mini" type="danger" plain>移出班级</el-button>-->
      </template>
    </el-table-column>
  </el-table>
  <div class="block" style="margin:10px 0">
    <el-pagination
      :hide-on-single-page="false"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,10, 20, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</div>
</template>

<script>
import {conditionCountStudent, countStudent, getStudentList, getStudentListByCondition} from '../../request/api'

export default {
  name: 'StudentInfo',
  data () {
    return {
      tableData: null,
      userInfo: null,
      pageSize: 5,
      currentPage: 1,
      searchRealName: null,
      searchUserId: null,
      total: null
    }
  },
  methods: {
    getStudentList: function () {
      getStudentList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        schoolId: this.userInfo.schoolId,
        classId: this.userInfo.classId
      }).then(resp => {
        if (resp.responseCode === 20007) {
          this.tableData = resp.data
          for (var i = 0; i < resp.data.length; i++) {
            var items = resp.data[i]
            if (items.sex === 0) {
              items.sexType = '男'
            } else {
              items.sexType = items.sex === 1 ? '女' : '保密'
            }
          }

          console.log(this.tableData)
        }
      })
    },
    getStudentListByCondition: function () {
      const parm = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        schoolId: this.userInfo.schoolId,
        classId: this.userInfo.classId,
        realName: this.searchRealName,
        userId: this.searchUserId
      }
      conditionCountStudent(parm).then(resp => {
        if (resp.responseCode === 20011) {
          this.total = resp.data
        } else {
          this.$message.error({
            message: resp.msg,
            duration: 3000
          })
        }
      })
      getStudentListByCondition(parm).then(resp => {
        if (resp.responseCode === 20007) {
          this.tableData = resp.data
          for (var i = 0; i < resp.data.length; i++) {
            var items = resp.data[i]
            if (items.sex === 0) {
              items.sexType = '男'
            } else {
              items.sexType = items.sex === 1 ? '女' : '保密'
            }
          }

          console.log(this.tableData)
        } else {
          this.$message.error({
            message: resp.msg,
            duration: 3000
          })
        }
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getStudentList() // 调用方法重新获取数据
      console.log('新的页大小：', this.pageSize)
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getStudentList() // 调用方法重新获取数据
      console.log('新的页码：', this.currentPage)
    },
    countStudentListSize: function () {
      const data = {
        classId: this.userInfo.classId,
        schoolId: this.userInfo.schoolId
      }

      countStudent(data).then(resp => {
        if (resp.responseCode === 20011) {
          this.total = resp.data
        }
      })
    },
    // 处理查看近期课堂专注度按钮的点击事件
    handleViewFocus (studentId, studentName) {
      console.log(`userId: ${studentId}, realName: ${studentName}`)

      this.$emit('update-student-info', studentId, studentName)
    }
  },
  created () {
    const userInfoStr = sessionStorage.getItem('userInfo')
    this.userInfo = JSON.parse(userInfoStr)
    this.countStudentListSize()
    this.getStudentList()
  }
}
</script>

<style scoped>
.search-container {
  display: flex;
  align-items: center;
}

.class-name {
  color: tomato;
  font-size: 20px;
  margin-left: auto; /* 调整 `span` 与其他元素之间的间距 */
}
</style>
